<template>
  <view>
    <view class="tank">
      <scroll-view class="tank-con" scroll-y="true" :style="{height:style.contentViewHeight+'px'}"
        :scroll-with-animation="true" :scroll-into-view="scrollid">
        <view class="get-more" @click="moreMessage" v-if="!isCompleted">点击查看更多</view>
        <view class="get-more" v-else>已经到顶了～</view>
        <view class="user-consult">
          <view class="user-item" :class="{'user-item-admin':item.flow != 'out'}"
            v-for="(item,index) in kefuChatListData" :key="index" :id="`chatitem${index}`">
            <block v-if="item.flow == 'out'">
              <view class="left">
                <view class="name">
                  <text class="txt">{{item.nick}}</text>
                  <text class="time">{{$timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss')}}</text>
                </view>
                <view class="cons-cont">
                  <rich-text v-if="item.type == 'TIMTextElem'" :nodes="richtextHtml(item.payload.text)" class="text"
                    @tap="richtextChange(item.payload.text)"></rich-text>
                  <image v-if="item.type == 'TIMImageElem'" :src="item.payload.imageInfoArray[0].imageUrl"
                    mode="widthFix" style="width: 400rpx;"></image>
                  <view v-if="item.type == 'TIMVideoFileElem'" style="position: relative;"
                    @click="lookvideo(item.payload.remoteVideoUrl)">
                    <image :src="item.payload.thumbUrl" mode="scaleToFill"
                      style="width: 400rpx;height:300rpx;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;">
                    </image>
                    <image src="../../static/video/play.png"
                      style="width: 60rpx;height: 60rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"
                      mode=""></image>
                  </view>
                  <view class="text" v-if="item.type == 'TIMCustomElem'">
                    [{{item.payload.data == 'videomsg' ? '视频通话' : '语音通话'}}]
                  </view>
                </view>
              </view>
              <view class="right">
                <image :src="item.avatar" class="img"></image>
              </view>
            </block>
            <block v-else>
              <view class="right">
                <image :src="item.avatar" class="img"></image>
              </view>
              <view class="left">
                <view class="name">
                  <text class="txt">{{item.nick}}</text>
                  <text class="time">{{$timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss')}}</text>
                </view>
                <view class="cons-cont">
                  <rich-text v-if="item.type == 'TIMTextElem'" :nodes="richtextHtml(item.payload.text)" class="text"
                    @tap="richtextChange(item.payload.text)"></rich-text>
                  <image v-if="item.type == 'TIMImageElem'" :src="item.payload.imageInfoArray[0].imageUrl"
                    mode="widthFix" style="width: 400rpx;"></image>
                  <view v-if="item.type == 'TIMVideoFileElem'" style="position: relative;"
                    @click="lookvideo(item.payload.remoteVideoUrl)">
                    <image :src="item.payload.thumbUrl" mode="scaleToFill"
                      style="width: 400rpx;height:300rpx;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;">
                    </image>
                    <image src="../../static/video/play.png"
                      style="width: 60rpx;height: 60rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"
                      mode=""></image>
                  </view>
                  <view class="text" v-if="item.type == 'TIMCustomElem'">
                    [{{item.payload.data == 'videomsg' ? '视频通话' : '语音通话'}}]
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="kefu-bottom">
      <view class="footer">
        <view class="speak-contcom">
          <image src="../../static/biaoqing.png" style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""
            @tap="show"></image>
          <image src="../../static/add.png" style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""
            @click="showPannel = false;showother = !showother;setScrollH();"></image>
        </view>
        <view class="text-input">
          <input class="write-input" type="text" name="comment" v-model="comment" autocomplete="off" value="">
        </view>
        <view class="send-button">
          <view class="send-btn" @click="btnSubmit">发送</view>
        </view>
      </view>
      <emotion @emotion="handleEmotion" :height="200" v-if="showPannel"></emotion>
      <view v-if="showother"
        style="display: flex;align-items: center;padding: 20rpx 40rpx;justify-content: space-between;flex-wrap: wrap;">
        <view @click="chooseImage(['album'])"
          style="margin-bottom: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 10rpx;">
          <image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;" src="../../static/photo1.png" mode=""></image>
          <text style="font-size: 28rpx;">相册</text>
        </view>
        <view @click="chooseImage(['camera'])"
          style="margin-bottom: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 10rpx;">
          <image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;" src="../../static/photo2.png" mode=""></image>
          <text style="font-size: 28rpx;">拍照</text>
        </view>
        <view @click="chooseVideo(['camera'])"
          style="margin-bottom: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 10rpx;">
          <image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;" src="../../static/video1.png" mode=""></image>
          <text style="font-size: 28rpx;">录像</text>
        </view>
        <view @click="chooseVideo(['album'])"
          style="margin-bottom: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 10rpx;">
          <image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;" src="../../static/video2.png" mode=""></image>
          <text style="font-size: 28rpx;">文件</text>
        </view>
        <!-- <view @click="tolive"
          style="margin-bottom: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 10rpx;">
          <image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;" src="../../static/phone.png" mode=""></image>
          <text style="font-size: 28rpx;">视频通话</text>
        </view> -->
      </view>
    </view>
    <view v-if="show1" @click="show1 = false"
      style="position: fixed;top: 0;left: 0;z-index: 99;background-color: rgba(0,0,0,0.5);display: flex;align-items: flex-end;width: 750rpx;height: 100vh;">
      <view style="width: 750rpx;padding: 10rpx;box-sizing: border-box;">
        <view
          style="display: flex;align-items: center;justify-content: space-between;padding: 15rpx 10rpx;border-radius: 10rpx;background-color: #fff;margin: 10rpx 0;">
          <image src="../../static/xiaoxi.png" mode="" style="width: 70rpx;height: 70rpx;opacity: 0;"></image>
          <text>联系人：{{shopInfo.service_name || '暂无联系人'}}</text>
          <image src="../../static/xiaoxi.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
        </view>
        <view @click.stop="totel(shopInfo.kf_tel)"
          style="display: flex;align-items: center;justify-content: space-between;padding: 15rpx 10rpx;border-radius: 10rpx;background-color: #fff;margin: 10rpx 0;">
          <image src="../../static/xiaoxi.png" mode="" style="width: 70rpx;height: 70rpx;opacity: 0;"></image>
          <text>电话：{{shopInfo.kf_tel || '暂无电话'}}</text>
          <image src="../../static/phone1.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
        </view>
        <view @click.stop="totel(shopInfo.mobile)"
          style="display: flex;align-items: center;justify-content: space-between;padding: 15rpx 10rpx;border-radius: 10rpx;background-color: #fff;margin: 10rpx 0;">
          <image src="../../static/xiaoxi.png" mode="" style="width: 70rpx;height: 70rpx;opacity: 0;"></image>
          <text>移动电话：{{shopInfo.mobile || '暂无移动电话'}}</text>
          <image src="../../static/phone.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  import Emotion from '@/components/emotion/index'
  const call = uni.requireNativePlugin('Html5App-TencentCall');
  export default {
    data() {
      return {
        user_type: 2,
        goods_id: 0,
        store_id: 0,
        token: '',
        type: 'default',
        default: 1,
        size: 10,
        page: 1,
        img: '',
        content: '',
        socketTask: null,
        is_open_socket: false,
        style: {
          pageHeight: 0,
          contentViewHeight: 0,
          footViewHeight: 46,
          mitemHeight: 0, //50,
          consultHeight: 0,
        },
        scrollTop: 0,
        comment: '',
        showPannel: false,
        timer: null,
        kefuLoginData: null,
        reg: /\#[\S]{1,3}\;/gi,
        from_id: null,
        user_id: '',
        showother: false,
        show1: false,
        nextReqMessageID: '',
        isCompleted: '',
        isloading: false, //是否加载更多，如果是true就不触发页面滚动
        kefuChatListData: [],
        $u: uni.$u,
        scrollid: ''
      }
    },
    components: {
      Emotion
    },
    //初始化加载数据
    async onLoad(e) {
      this.user_id = e.user_id
      const res = uni.getSystemInfoSync();
      this.style.pageHeight = res.windowHeight - this.style.mitemHeight;
      this.style.contentViewHeight = this.style.pageHeight - this.style.footViewHeight;
      //初始化socket
      this.chatList()
      uni.$tim.on(uni.$TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
    },

    computed: {

    },
    methods: {
      tolive() {
        uni.$H.post("admin/user/tim/sign").then(res => {
          console.log(res.data.sign);
          console.log(uni.getStorageSync('user_id').toString());
          this.sign = res.data.sign
          call.openCall({
            "type": 1, //1 代表对一对一界面,0 代表默认界面  
            "callType": "video", // 留空，使用默认模式，video 是视频，voice 是语音通话
            "username": "用户", //对方的用户昵称
            "useravatar": "http://www.html5-app.com/uploads/avatar/042cae50df1d177b691417a316e4a886.png", //对方的头像
            "myname": "客服", //我的昵称
            "myavatar": "http://www.html5-app.com/uploads/avatar/f5950e65261f2aa3e846e2262b0c7690.png", //我的头像
            "wait": "正在等待对方接受邀请...",
            "prompt": "通话中...",
            "userid": uni.getStorageSync('user_id').toString(), // 我的腾讯云通话用户id
            "roomid": 110235, //房间号, 数字,随着填写
            "usersig": res.data.sign //用户名加密串
          }, ret => {
            this.title += JSON.stringify(ret);
            console.log(ret);
          });
        }).catch(err => {
          console.log(err);
        })
        
        // uni.navigateTo({
        //   url: "./live?user_id=" + this.user_id
        // })
      },
      onMessageReceived(e) {
        if(!e.data[0].payload.description && e.data[0].payload.description != 0){
          this.kefuChatListData.push(e.data[0])
        }
        
      },
      totel(tel) {
        if (tel) {
          uni.makePhoneCall({
            phoneNumber: tel
          })
        }
      },
      lookvideo(url) {
        uni.navigateTo({
          url: "./look-video?url=" + url
        })
      },
      richtextHtml(html) {
        const regex = new RegExp('<img', 'gi');
        html = html.replace(regex, '<img class="title-img"');
        return html
      },
      // 聊天列表
      chatList() {
        uni.showLoading({
          mask: true,
          title: '请稍后'
        })
        // 打开某个会话时，第一次拉取消息列表
        let promise = uni.$tim.getMessageList({
          conversationID: `C2C${this.user_id}`,
          count: 15
        });
        promise.then((imResponse) => {
          // this.kefuChatListData = imResponse.data.messageList // 消息列表。
          var arr = []
          imResponse.data.messageList.forEach(val => {
            if(val.type == 'TIMCustomElem' && val.payload.description == 1){
              arr.push(val)
            }else if(val.type != 'TIMCustomElem'){
              arr.push(val)
            }
          })
          this.kefuChatListData = arr
          // console.log(this.kefuChatListData);
          this.nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
          this.isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
          uni.hideLoading()
        }).catch(function(imError) {
          uni.hideLoading()
        });
        return
        // 之前的聊天
        /**
        this.$store.dispatch('setKefuSingleChatList', {
          user_type: this.user_type,
          type: this.type,
          store_id: this.store_id,
          page: this.page
        });

        this.page = this.page + 1
        **/
      },
      // 查看更多
      moreMessage() {
        if (!this.isCompleted) {
          this.isloading = true
          let promise = uni.$tim.getMessageList({
            conversationID: `C2C${this.user_id}`,
            nextReqMessageID: this.nextReqMessageID,
            count: 15
          });
          promise.then((imResponse) => {
            console.log(imResponse.data);
            var arr = []
            imResponse.data.messageList.forEach(val => {
              if(val.type == 'TIMCustomElem' && val.payload.description == 1){
                arr.push(val)
              }else if(val.type != 'TIMCustomElem'){
                arr.push(val)
              }
            })
            // var arr = imResponse.data.messageList
            arr = arr.concat(this.kefuChatListData)
            this.kefuChatListData = arr // 消息列表。
            // this.kefuChatListData = imResponse.data.messageList 
            this.nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
            this.isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
          });
        }
        return
        // 之前的聊天
        /**
        this.$store.dispatch('setKefuSingleChatList', {
          page: this.page,
          user_type: this.user_type,
          store_id: this.store_id,
          default: this.default,
        })

        this.page = this.page + 1**/
      },
      // 发送消息
      btnSubmit() {
        let that = this
        if (that.comment == '' || that.comment == null) {
          uni.showToast({
            title: '发送消息不能为空',
            icon: 'none'
          })
          return false
        }

        uni.showLoading({
          title: '发送中...'
        });
        //发送消息
        let message = uni.$tim.createTextMessage({
          to: this.user_id,
          conversationType: 'C2C',
          payload: {
            text: that.comment.replace(that.reg, that.emotion)
          }
        })
        let promise = uni.$tim.sendMessage(message);
        promise.then((imResponse) => {
          // 发送成功
          //关闭表情窗
          this.showPannel = false;
          this.showother = false
          this.setScrollH();
          console.log(JSON.parse(JSON.stringify(imResponse.data.message)));
          this.kefuChatListData.push(imResponse.data.message)
          uni.hideLoading();
          that.comment = ''
        }).catch(function(imError) {
          // 发送失败
          console.warn('sendMessage error:', imError);
        });

        // let obj = {
        //   msg: that.comment.replace(that.reg, that.emotion),
        //   type: 'sendmsg',
        //   to_id: that.from_id,
        //   avatar: that.kefuLoginData.user.avatar,
        //   goods_id: that.goods_id,
        //   store_id: that.store_id,
        //   origin: uni.getStorageSync('platform')
        // }

        // that.clickRequest(obj);
        // that.$store.dispatch('setTransMessage', {
        //   message: that.comment.replace(that.reg, that.emotion),
        //   avatar: that.kefuLoginData.user.avatar,
        //   name: that.kefuLoginData.user.nick_name,
        //   time: that.$formatDateTime(that.$getCurDate() - (3600 * 8)),
        //   user_type: 2,
        //   to_user_id: that.from_id,
        //   status: 0
        // }).then(res => {
        //   uni.hideLoading();
        //   that.comment = ''
        // })


      },
      // sendMsg(msg) {
      //   let that = this;

      //   uni.showLoading({
      //     title: '发送中...'
      //   });

      //   //发送消息
      //   let obj = {
      //     msg: msg,
      //     type: 'sendmsg',
      //     to_id: that.from_id,
      //     avatar: that.kefuLoginData.user.avatar,
      //     goods_id: that.goods_id,
      //     store_id: that.store_id,
      //     origin: uni.getStorageSync('platform')
      //   }

      //   that.clickRequest(obj);

      //   that.$store.dispatch('setTransMessage', {
      //     message: msg,
      //     avatar: that.kefuLoginData.user.avatar,
      //     name: that.kefuLoginData.user.nick_name,
      //     time: that.$formatDateTime(that.$getCurDate()),
      //     user_type: 2,
      //     to_user_id: that.from_id,
      //     status: 0
      //   }).then(res => {
      //     uni.hideLoading();
      //     that.comment = ''
      //   })
      // },
      //发送图片
      chooseImage(type) {
        uni.showToast({
          title: '请选择2MB以下的图片',
          icon: 'none'
        });

        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: type,
          success: (res) => {
            // console.log(res);
            // Web 端发送图片消息示例1 - 传入 DOM 节点
            // 1. 创建消息实例，接口返回的实例可以上屏
            let message = uni.$tim.createImageMessage({
              to: this.user_id,
              conversationType: 'C2C',
              // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考 消息优先级与频率控制
              // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
              // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
              payload: {
                file: res,
              },
              onProgress: function(event) {
                console.log('file uploading:', event)
              }
            });
            // 2. 发送消息
            let promise = uni.$tim.sendMessage(message);
            promise.then((imResponse) => {
              // 发送成功
              this.showPannel = false;
              this.showother = false
              this.setScrollH()
              console.log(JSON.parse(JSON.stringify(imResponse.data.message)));
              this.kefuChatListData.push(imResponse.data.message)
            }).catch((imError) => {
              // 发送失败
              console.warn('sendMessage error:', imError);
            });

            // pathToBase64(res.tempFilePaths[0]).then(base64 => {
            //   this.$store.dispatch('setSendImage', {
            //     file: {
            //       content: base64
            //     },
            //   }).then(data => {
            //     this.img = '<img class="title-img" src="' + data.data[0] + '" />'
            //     this.sendMsg(this.img);
            //   })
            // }).catch(error => {
            //   console.error(error, 5);
            // });
          }
        })
      },
      // 发送视频 
      chooseVideo(type) {
        uni.chooseVideo({
          sourceType: type,
          success: (res) => {
            console.log(res);
            let message = uni.$tim.createVideoMessage({
              to: this.user_id,
              conversationType: 'C2C',
              // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考 消息优先级与频率控制
              // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
              // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
              payload: {
                file: res,
              },
              onProgress: function(event) {
                // console.log('file uploading:', event)
                if (event < 1) {
                  uni.showLoading({
                    mask: true,
                    title: "上传中"
                  })
                } else {
                  uni.hideLoading()
                  uni.showToast({
                    icon: 'none',
                    title: "发送成功"
                  })
                }
              }
            });
            // 2. 发送消息
            let promise = uni.$tim.sendMessage(message);
            promise.then((imResponse) => {
              // 发送成功
              this.showPannel = false;
              this.showother = false
              this.setScrollH()
              console.log(JSON.parse(JSON.stringify(imResponse.data.message)));
              this.kefuChatListData.push(imResponse.data.message)
            }).catch((imError) => {
              // 发送失败
              console.warn('sendMessage error:', imError);
            });
          }
        })
      },
      //展示表情
      show() {
        this.showPannel = !this.showPannel;
        this.showother = false
        this.setScrollH();
      },
      emotion(res) {
        let word = res.replace(/\#|\;/gi, '')
        const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷',
          '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕',
          '折磨', '衰',
          '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓',
          '可怜',
          '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球',
          '瓢虫',
          '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻',
          '跳跳',
          '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'
        ]
        let index = list.indexOf(word)
        return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
      },
      handleEmotion(i) {
        this.comment += i
      },
      // 设置高度 用emit辅助
      setScrollH() {
        let that = this
        var query = uni.createSelectorQuery();
        let footh = query.select('.kefu-bottom');
        const res = uni.getSystemInfoSync();
        that.$nextTick(function() {
          footh.fields({
            size: true
          }, data => {
            footh = data.height;
            that.style.contentViewHeight = that.style.pageHeight - footh; //像素
          }).exec();
        })
      },
      consultH() {
        if (this.isloading) {
          this.isloading = false
          return
        }
        let that = this
        var query = uni.createSelectorQuery();
        let footh = query.select('.user-consult');
        that.$nextTick(() => {
          this.scrollid = `chatitem${this.kefuChatListData.length - 1}`
          // footh.fields({
          //   size: true
          // }, data => {
          //   that.style.consultHeight = data.height;
          //   if (data.height > that.style.contentViewHeight) {
          //     that.scrollTop = data.height - that.style.contentViewHeight
          //     console.log(that.scrollTop)
          //   }
          // }).exec();
        })
      },
      richtextChange(obj) {
        let arr = [];
        var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;

        if (obj.match(srcReg)) {
          arr.push(obj.match(srcReg)[1])

          uni.previewImage({
            current: 1,
            urls: arr
          })
        }
      }
    },
    watch: {
      kefuChatListData() {
        //容器高度
        this.consultH();
      }
    }
  }
</script>

<style lang="scss">
  .tank {}

  .tank .get-more {
    width: 100%;
    padding: 30upx 0;
    color: #00a2d4;
    text-align: center;
    font-size: 28upx;
  }

  .tank-con {}

  .user-consult {
    padding: 0 20upx 30upx;
  }

  .user-consult .user-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    // align-items: center;
    margin-bottom: 30upx;
  }

  .user-consult .user-item:last-child {
    margin-bottom: 0;
  }

  .user-consult .user-item .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-right: 20upx;
  }

  .user-consult .user-item .left .name {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .user-consult .user-item .left .name .txt {
    font-size: 32upx;
    color: #333;
    font-weight: bold;
    margin-right: 10upx;
  }

  .user-consult .user-item .left .name .time {
    font-size: 28upx;
    color: #999;
  }

  .user-consult .user-item .left .cons-cont {
    display: flex;
    justify-content: flex-end;
  }

  .user-consult .user-item .left .cons-cont .text {
    padding: 10upx 20upx;
    color: #333333;
    border-radius: 10upx;
    background: #e7e8ef;
    display: inline-block;
    font-size: 26upx;
  }

  .user-consult .user-item .right {
    image {
      width: 80upx;
      height: 80upx;
      border-radius: 50%;
    }
  }


  .user-consult .user-item-admin {
    justify-content: flex-start;
  }

  .user-consult .user-item-admin .left {
    margin: 0 0 0 20upx;
  }

  .user-consult .user-item-admin .left .cons-cont {
    justify-content: flex-start;
  }

  .user-consult .user-item-admin .left .cons-cont .text {
    background: #f1cdcea3;
  }

  .kefu-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    background: #e8e8e8;
    border-top: 1px solid #efefef;
  }

  .kefu-bottom .footer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .kefu-bottom .speak-contcom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-right: 28upx;
  }

  .kefu-bottom .speak-contcom .iconfont {
    font-size: 50upx;
    margin-left: 28upx;
  }

  .kefu-bottom .text-input {
    background: #FFFFFF;
    height: 70upx;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .kefu-bottom .text-input .write-input {
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;
  }

  .kefu-bottom .send-button {
    margin-left: 28upx;
  }

  .kefu-bottom .send-button .send-btn {
    background: #00a2d4;
    color: #FFFFFF;
    height: 70upx;
    line-height: 70upx;
    padding: 0 20upx;
    border-radius: 10upx;
    margin-right: 28upx;
  }

  rich-text {
    .title-img {
      max-width: 150px;
    }
  }
</style>
